feat(thumbnail): add recipe and tokens by thetaPC · Pull Request #31166 · ionic-team/ionic-framework

thetaPC · 2026-05-22T23:14:15Z

Issue number: resolves internal

What is the current behavior?

ion-thumbnail is already a single SCSS file (no per-theme fragmentation), but its styles are hardcoded rather than driven by the Modular Ionic token system. The TSX also still calls getIonTheme and applies a theme class to the host even though all three themes render identically.

In addition, --size controls both width and height with a single token, so non-square thumbnails are not possible without a separate width/height override.

What is the new behavior?

Defined TypeScript Interface: Added a new thumbnail.interfaces.ts with the IonThumbnailRecipe type.
Defined Theme Defaults: Added per-theme token defaults in ios, md, and ionic theme files.
Split --size into --width + --height: Non-square thumbnails are now possible.
Public CSS variables: Replaced --size / --border-radius with the namespaced --ion-thumbnail-width, --ion-thumbnail-height, and --ion-thumbnail-border-radius.
Removed theme classes: Thumbnails won't render with a theme defined as a class.
Updated consumers internally: ion-item-divider, ion-item (ios + md theme files) now set --ion-thumbnail-width and --ion-thumbnail-height directly instead of --size.

Does this introduce a breaking change?

Yes
No

This PR introduces breaking changes to how ion-thumbnail is styled.

Migration Path:

CSS Variable Replacements: --size and --border-radius have been removed. Use the new token structure:

--size -> IonThumbnail.width + IonThumbnail.height
--border-radius -> IonThumbnail.border.radius

Code that previously relied on a single --size override must now set both --ion-thumbnail-width and --ion-thumbnail-height:

// Before
<ion-thumbnail style="--size: 48px"></ion-thumbnail>

// After
<ion-thumbnail style="--ion-thumbnail-width: 48px; --ion-thumbnail-height: 48px"></ion-thumbnail>

If per-component customization is needed, the CSS variables can be used directly.

--size -> --ion-thumbnail-width / --ion-thumbnail-height
--border-radius -> --ion-thumbnail-border-radius

Note: slotted thumbnails inside ion-item and ion-item-divider continue to render at their previous sizes — these components have been updated internally to set the new variables.

Theme classes: Remove any instances that target the theme classes: ion-thumbnail.md, ion-thumbnail.ios.

Other information

Preview:

Thumbnail: basic

vercel · 2026-05-22T23:14:21Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 27, 2026 9:22pm

thetaPC · 2026-05-23T01:19:30Z

 cp -r "${CORE_DIR}/src" "${OUTPUT_DIR}/src"
 cp -r "${CORE_DIR}/dist" "${OUTPUT_DIR}/dist"
 cp -r "${CORE_DIR}/css" "${OUTPUT_DIR}/css"
+cp -r "${CORE_DIR}/themes" "${OUTPUT_DIR}/themes"


The themes/ directory (generated by npm run build.themes and dynamically imported by scripts.js at runtime as /themes/{theme}/default.tokens.js) wasn't being copied into the Vercel output, so the token modules 404'd in deployed previews while working fine locally where the dev server serves it from core/.

thetaPC · 2026-05-23T01:20:30Z

+  width: var(--ion-item-divider-thumbnail-width, revert-layer);
+  height: var(--ion-item-divider-thumbnail-height, revert-layer);


If these tokens are not set then default to the size that was set prior like the original --ion-thumbnail-width/--ion-thumbnail-height.

… into FW-6862

ShaneK

Minor non-blocking nits, great work!

ShaneK · 2026-05-27T16:55:28Z


 ::slotted(ion-thumbnail) {
-  --size: #{$item-ios-thumbnail-size};
+  // TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.


Suggested change

// TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.

// TODO(FW-6847): replace $item-ios-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.

Copy-paste from item.md.scss left this referencing $item-md-thumbnail-* even though the file uses $item-ios-thumbnail-* on the next two lines. Since both files carry the same note, a shorter // TODO(FW-6847): adopt the revert-layer pattern from item-divider.scss could also work

ShaneK · 2026-05-27T16:58:13Z

+          <style>
+            ion-thumbnail {
+              --ion-item-thumbnail-width: 20px;
+              --ion-item-thumbnail-height: 20px;
+            }
+          </style>


Should this set --ion-item-thumbnail-width and --ion-item-thumbnail-height on ion-item instead of ion-thumbnail? The <ion-item-divider> test right below sets the divider variant on ion-item-divider, so the two would line up. It works either way because the property cascades, but the variable name implies it belongs on the parent.

ShaneK · 2026-05-27T17:00:20Z


-  width: var(--size, 48px);
-  height: var(--size, 48px);
+  width: var(--ion-thumbnail-width);


var(--ion-thumbnail-width) and var(--ion-thumbnail-height) lost the literal fallback that var(--size, 48px) used to give you. I think the token system sets these globally so it's fine in practice, but if a consumer opts out of the default theme or the tokens haven't applied yet, the thumbnail collapses to auto and renders 0x0. Worth keeping a fallback, or is there a guarantee I'm missing?

Good catch! 987a131

… into FW-6862

feat(thumbnail): add recipe and tokens

d432cdd

github-actions Bot added the package: core @ionic/core package label May 22, 2026

docs(BREAKING): add thumbnail

4149d8f

github-actions Bot added the package: angular @ionic/angular package label May 22, 2026

vercel Bot deployed to Preview May 22, 2026 23:23 View deployment

chore(item): run lint

c0e8d6b

vercel Bot deployed to Preview May 22, 2026 23:35 View deployment

fix(vercel): add themes directory to vercel build

b3d4c38

vercel Bot deployed to Preview May 23, 2026 00:56 View deployment

feat(thumbnail): proper size tokens setup for item

0153a0b

thetaPC commented May 23, 2026

View reviewed changes

vercel Bot deployed to Preview May 23, 2026 01:23 View deployment

fix(item): use proper token customization

2896277

vercel Bot deployed to Preview May 23, 2026 02:49 View deployment

thetaPC marked this pull request as ready for review May 23, 2026 03:13

thetaPC requested a review from a team as a code owner May 23, 2026 03:13

thetaPC requested a review from gnbm May 23, 2026 03:13

Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework…

ca3a6f0

… into FW-6862

vercel Bot deployed to Preview May 26, 2026 17:13 View deployment

ShaneK approved these changes May 27, 2026

View reviewed changes

docs(item): update comments

6b24703

vercel Bot deployed to Preview May 27, 2026 18:25 View deployment

fix(thumbnail): use correct tokens

2b4b30b

vercel Bot deployed to Preview May 27, 2026 18:32 View deployment

thetaPC added 2 commits May 27, 2026 14:15

feat(thumbnail): add size fallback

987a131

Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework…

026dce8

… into FW-6862

vercel Bot deployed to Preview May 27, 2026 21:22 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(thumbnail): add recipe and tokens#31166

feat(thumbnail): add recipe and tokens#31166
thetaPC wants to merge 11 commits into
ionic-modularfrom
FW-6862

thetaPC commented May 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 22, 2026 •

edited

Loading

Uh oh!

thetaPC May 23, 2026

Uh oh!

thetaPC May 23, 2026

Uh oh!

ShaneK left a comment

Uh oh!

ShaneK May 27, 2026

Uh oh!

thetaPC May 27, 2026

Uh oh!

ShaneK May 27, 2026

Uh oh!

thetaPC May 27, 2026

Uh oh!

ShaneK May 27, 2026

Uh oh!

thetaPC May 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		width: var(--ion-item-divider-thumbnail-width, revert-layer);
		height: var(--ion-item-divider-thumbnail-height, revert-layer);

	// TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.
	// TODO(FW-6847): replace $item-ios-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them.

Conversation

thetaPC commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thetaPC commented May 22, 2026 •

edited

Loading

vercel Bot commented May 22, 2026 •

edited

Loading